<template>
    <!-- // 全选反选组件==》可用于高级搜索 -->
    <div class="chkbox_group">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange" class="all_chk">全选</el-checkbox>
        <el-checkbox-group v-model="checkdData" @change="handleCheckedStateChange">
            <el-checkbox v-for="item in showData" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script>

export default {
    props: {
        chackdData: {
            type: Array,
            default: ()=>{
                return []
            },
            require: true
        }
    },
    data () {
        return{
            checkdData: [],
            checkAll: null
        }
    },
    created () {
    },
    computed: {
        showData () {
            return this.chackdData.map((v, i)=>{
                let falg = v instanceof Object
                if(!falg) {
                    let obj = {
                        value: i,
                        label: v
                    }
                    return obj
                }else{
                    return v
                }
            })
        }
    },
    methods: {
        //全选反选
        handleCheckAllChange (val) {
            this.checkdData = []
            if(val) {
                this.showData.forEach(v=>{
                    console.log(v)
                    this.checkdData.push(v.value) //通过循环和states匹配
                })
                this.Emit()
            }else{
                this.$emit('checkdData', [])
            }
            this.isIndeterminate = false
        },
        handleCheckedStateChange (val) {
            this.checkdData = []
            if(val) {
                let stateArr = val.map(v=>{
                    return this.showData.find(x=>x.value === v)
                })
                stateArr.forEach(v=>{
                    this.checkdData.push(v.value)
                })
                this.Emit()
                this.checkAll = val.length === this.showData.length
            }else{
                this.$emit('checkdData', [])
            }

        },
        Emit () {
            this.$emit('checkdData', this.checkdData)
        }
    }
}
</script>

<style lang="scss" scoped>
.chkbox_group,
.el-checkbox-group{
    display: flex;flex-wrap: wrap;
}
.all_chk{
    width: 20%;
    min-width: 200px;
}
::v-deep.el-checkbox{
    display: flex; align-items: center;
}
.el-checkbox-group{
    width: 75%;
    flex: 1;
    .el-checkbox{
        width: 25%;
        min-width: 200px;
    }
}
.chkbox_group{
    width: 100%;
    align-items: flex-start;
}
</style>